<script setup>
import Echarts from "../../board/comprehensive/echarts.vue";
import { GetlistsAPI, GetChartAPI } from "@/api/statisticAnalysis/device";
const { proxy } = getCurrentInstance();

/**
 * 字典查询
 */
const { sys_analyze_data } = proxy.useDict("sys_analyze_data");
// 查询条件 枚举
const selectList = ref([
  { label: "时间选择", type: "时间选择", model: "ac" },

  {
    label: "分析数据",
    type: "下拉单选",
    opt: [
      {
        label: "电",
        value: 1,
      },
      {
        label: "气",
        value: 2,
      },
    ],
  },
]);
/**
 *报表搜索
 */
const reportSelectList = ref([
  { label: "时间选择", type: "时间选择", model: "ac" },

  {
    label: "设备名称",
    type: "输入框",
  },
]);
/**
 * tabs
 */
const activeName = ref("图表");
const tabs = ref([
  {
    title: "运行监测",
    value: 0,
  },
  {
    title: "实时监控",
    value: 1,
  },
  {
    title: "设备工况",
    value: 2,
  },
]);

const timeDate = ref([]);

const timeDateTwo = ref([]);

/**
 * 表单实例
 */
const ruleFormRef = ref(null);
/**
 * 表单
 */
const ruleForm = ref({});

/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "name",
  value: "id",
};
/**
 * 按钮
 */
const buttonList = ref([
  // { type: "export", hasPermi: "statisticAnalysis:device:export" },
]);
/**
 * 树结构
 */
const dataTree = ref([]);

/**
 * 列表枚举
 */
const column = ref([
  { label: "设备编码", prop: "deviceCode", width: "150" },
  { label: "设备名称", prop: "deviceName", width: "150" },
  { label: "设备型号", prop: "deviceUnitType", width: "150" },
  { label: "设备厂商", prop: "factoryName", width: "120" },
  { label: "工作固定时间", prop: "fixedWorkingHours", width: "120" },
  { label: "运行时间", prop: "runTimes", width: "150" },
  { label: "故障时间", prop: "repairTimes", width: "150" },
  { label: "设备故障率", prop: "failureRate", width: "120" },
  { label: "平均故障时间", prop: "meanTimeFailure", width: "150" },
  { label: "平均修复时间", prop: "meanTimeRepair", width: "auto" },
]);
/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: "新增",
  row: [],
  ids: [],
  treeShow: false, //树结构弹窗
});
/**
 * 查询条件
 */
const query = reactive({
  beginTime: "",
  endTime: "",
  type: "1",
  // pageNum: 1,
  // pageSize: 10,
});
/**
 * 类型赛选条件
 */
const querys = reactive({
  pageNum: 1,
  pageSize: 10,
  month: "",
  deviceName: "",
});

const tableData = ref([]);
const options = ref([]);

/**
 * 查询条件
 */
const selectSubmit = () => {
  query.beginTime = timeDate.value ? timeDate.value[0] : "";
  query.endTime = timeDate.value ? timeDate.value[1] : "";
  getChart();
};

/**
 * 重置
 */
const resetting = () => {
  timeDate.value = JSON.parse(sessionStorage.getItem("timeDate"));
  selectSubmit();
};

/**
 * 报表充值
 */

const reportResetting = () => {
  querys.month = sessionStorage.getItem("month");
  querys.deviceName = "";
  getList();
};
/**
 * 当前日期
 */
const nowDate = new Date();
let year = nowDate.getFullYear();
let month = nowDate.getMonth() + 1;
let day = nowDate.getDate();
// 添加分隔符“-”
var seperator = "-";

// 对月份进行处理，1-9月在前面添加一个“0”
if (month >= 1 && month <= 9) {
  month = "0" + month;
}

// 对月份进行处理，1-9号在前面添加一个“0”
if (day >= 0 && day <= 9) {
  day = "0" + day;
}
querys.month = year + seperator + month;
sessionStorage.setItem("month", querys.month);
query.endTime = year + seperator + month + seperator + day;

const getPreviousDate = (numOfDays) => {
  var date = new Date();
  // 使用 setDate 方法设置新的日期，减去 numOfDays 天
  date.setDate(date.getDate() - numOfDays);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  var seperator = "-";
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }

  // 对月份进行处理，1-9号在前面添加一个“0”
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  return year + seperator + month + seperator + day;
};
query.beginTime = getPreviousDate(7);
timeDate.value.push(query.beginTime);
timeDate.value.push(query.endTime);

sessionStorage.setItem("timeDate", JSON.stringify(timeDate.value));
const getOption = (x, y, m) => {
  return {
    legend: {},
    xAxis: {
      data: x,
    },
    yAxis: {},
    dataZoom: [
      {
        type: "slider",
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 5,
        zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: 6, //组件高度
        left: 100,
        right: 100, //右边的距离
        bottom: 0, //右边的距离
        brushSelect: false, //刷选功能
        fillerColor: "#E0E0E0", //选中范围的填充颜色
        borderColor: "#E0E0E0", //边框颜色
        backgroundColor: "#FFF", //两边未选中的滑动条区域的颜色
        borderRadius: 3,
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        filterMode: "filter",
      },
      {
        type: "inside",
        xAxisIndex: [0],
        start: 1,
        end: 50,
        zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
      },
    ],

    series: [
      {
        // name: "Sale",
        type: "bar",
        itemStyle: {
          color: "#02a7f0",
        },
        data: y,
        label: {
          show: true,
          position: "top",
          // formatter: `{@score}${m}`,
          formatter: function (p) {
            console.log(parseFloat(p.value).toFixed(2), "value");
            let value = parseFloat(p.value).toFixed(2);
            return value + m;
          },
        },
      },
    ],
  };
};
/*
 * 图表
 */
const option = ref({});

const getChart = async () => {
  try {
    const { data: res } = await GetChartAPI(query);
    // option.xAxis.data = res.xxData;
    // option.series[0].data = res.yyData;
    option.value = getOption(
      res.xxData,
      res.yyData,
      query.type == 1 ? "%" : ""
    );
  } catch {}
};

onMounted(() => {
  getChart();
});
/**
 * 类型
 */
const getList = async () => {
  try {
    const res = await GetlistsAPI(querys);

    state.total = res.total;
    tableData.value = res.rows;
    console.log();
  } catch (err) {
  } finally {
  }
};

getList();
</script>

<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="图表" name="图表">
            <div class="Echarts">
              <!-- <p-select-form
                :selectForm="selectList"
                @selectSubmit="selectSubmit"
              /> -->
              <div class="selectForm">
                <p>
                  <span>时间选择：</span>
                  <el-date-picker
                    v-model="timeDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始"
                    end-placeholder="结束"
                    :clearable="false"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
                </p>
                <p>
                  <span style="margin-left: 20px">分析数据：</span>
                  <el-select v-model="query.type" placeholder="分析数据">
                    <el-option
                      v-for="item in sys_analyze_data"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </p>
                <el-button
                  type="primary"
                  style="margin-left: 20px"
                  @click="selectSubmit"
                  >查询</el-button
                >
                <el-button type="info" @click="resetting">重置</el-button>
              </div>
              <div class="box">
                <Echarts :option="option" height="100%" :loading="true" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="报表" name="报表">
            <div class="report">
              <div class="selectForm">
                <p>
                  <span>时间选择：</span>
                  <el-date-picker
                    v-model="querys.month"
                    type="month"
                    placeholder="时间选择"
                    value-format="YYYY-MM"
                  />
                </p>
                <p>
                  <span style="margin-left: 20px">设备名称</span>
                  <el-input
                    v-model="querys.deviceName"
                    style="width: 150px"
                    placeholder="设备名称"
                  />
                </p>
                <el-button
                  type="primary"
                  style="margin-left: 20px"
                  @click="getList"
                  >查询</el-button
                >
                <el-button type="info" @click="reportResetting">重置</el-button>
              </div>

              <p-table
                class="tableClass"
                :isSel="false"
                :data="tableData"
                v-model:page="querys.pageNum"
                v-model:limit="querys.pageSize"
                :total="state.total"
                @pagination="getList"
                :column="column"
              >
                <template #buttons>
                  <!-- 按钮组件 -->
                  <p-button :list="buttonList" @add="addDic" />
                </template>
              </p-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  background-color: #f4f4f4;
}

.card-tree {
  height: 60rem;
  overflow: auto;
}

.show {
  background-color: #169bd5 !important;
  color: #fff;
}

.demo-tabs {
  background-color: #fff;
}

.report {
  padding: 20px;
}
.Echarts {
  background-color: #fff;
  padding: 20px;
  height: 745px;

  .box {
    height: 600px;
  }
}

.card {
  height: 50rem;
  // overflow: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
}

.tabs {
  display: flex;

  .tabs-list {
    padding: 10px;
    background-color: #e3e3e3;
    margin-right: 10px;
    cursor: pointer;
  }
}

::v-deep .el-input__suffix-inner {
  display: flex !important;
  align-items: center !important;
}

.selectForm {
  display: flex;
  align-items: center;
}
</style>